<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Menu</title>

<script src="http://code.jquery.com/jquery-latest.min.js"
	type="text/javascript"></script>



<style type="text/css">
/*   ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;} */
#menuWrapper {
	width: 100%; /* Menu width */
	height: 35px;
	padding-left: 14px;
	background: #333; /* Background color */
	border-radius: 10px;
}

.menu {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 35px;
	position: relative;
	z-index: 5;
	font-family: arial, verdana, sans-serif;
}

.menu li:hover li a {
	background: none;
}

.menu li.top {
	display: block;
	float: left;
}

.menu li a.top_link {
	display: block;
	float: left;
	height: 35px;
	line-height: 34px;
	color: #ccc;
	text-decoration: none;
	font-family: "Verdana", sans-serif;
	font-size: 12px; /* Font size */
	font-weight: bold;
	padding: 0 0 0 12px;
	cursor: pointer;
}

.menu li a.top_link span {
	float: left;
	display: block;
	padding: 0 24px 0 12px;
	height: 35px;
}

.menu li a.top_link span.down {
	float: left;
	display: block;
	padding: 0 24px 0 12px;
	height: 35px;
}

.menu li a.top_link:hover,.menu li:hover>a.top_link {
	color: #fff;
}

.menu li:hover {
	position: relative;
	z-index: 2;
}

.menu ul,.menu li:hover ul ul,.menu li:hover ul li:hover ul ul,.menu li:hover ul li:hover ul li:hover ul ul,.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
	{
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu li:hover ul.sub {
	left: 0;
	top: 35px;
	background: #333; /* Submenu background color */
	padding: 3px;
	white-space: nowrap;
	width: 200px;
	height: auto;
	z-index: 3;
}

.menu li:hover ul.sub li {
	display: block;
	height: 30px;
	position: relative;
	float: left;
	width: 200px;
	font-weight: normal;
}

.menu li:hover ul.sub li a {
	display: block;
	height: 30px;
	width: 200px;
	line-height: 30px;
	text-indent: 5px;
	color: #ccc;
	text-decoration: none;
}

.menu li ul.sub li a.fly {
	/* Submenu Background Color */
	background: #333
		url(http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif)
		185px 10px no-repeat;
}

.menu li:hover ul.sub li a:hover {
	background: #515151; /* Background Color on mouseover */
	color: #fff;
}

.menu li:hover ul.sub li a.fly:hover,.menu li:hover ul li:hover>a.fly {
	/* Background on Mouseover */
	background: #646464
		url(http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif)
		185px 10px no-repeat;
	color: #fff;
}

.menu li:hover ul li:hover ul,.menu li:hover ul li:hover ul li:hover ul,.menu li:hover ul li:hover ul li:hover ul li:hover ul,.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
	{
	left: 200px;
	top: -4px;
	background: #333; /* Background Color of the Submenu */
	padding: 3px;
	white-space: nowrap;
	width: 200px;
	z-index: 4;
	height: auto;
}

#search {
	width: 228px; /* Width of the Search Box */
	height: 50px;
	float: right;
	z-index: 2;
	text-align: center;
	margin-top: 5px;
	margin-right: 6px;
	/* Background of the Search Box */
	background:
		url(http://2.bp.blogspot.com/-kSPW07r2Ct8/UazXPD9DbfI/AAAAAAAADtE/UyopBgIPe-w/s1600/searchBar1.png)
		no-repeat;
}

#search-box {
	margin-top: 3px;
	border: 0px;
	background: transparent;
	text-align: center;
}
</style>



<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('.toggle-nav').click(function(e) {
			jQuery(this).toggleClass('active');
			jQuery('.menu ul').toggleClass('active');

			e.preventDefault();
		});
	});
</script>


</head>
<body>
	<!-- 	<ul id="drop-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Employee</a>
    <ul>
      <li><a href="EmployeeAdd.jsp" target="contentFrame">Add</a></li>
      <li><a href="EmployeeView.jsp" target="contentFrame">View</a></li>
      <li><a href="" target="contentFrame">Modify</a></li>
    </ul>
  </li>
  <li><a href="#">Project</a>
    <ul>
      <li><a href="ProjectAdd.jsp"  target="contentFrame"  >Add</a></li>
      <li><a href="ProjectViewAll.jsp?isModify=0" target="contentFrame">View</a></li>
      <li><a href="ProjectViewAll.jsp?isModify=1" target="contentFrame">Modify</a></li>
      <li><a href=""  target="contentFrame"  >Team</a>
      		 <ul>
			      <li><a href="ProjectAdd.jsp"  target="contentFrame"  >Add</a></li>
			      <li><a href="ProjectViewAll.jsp?isModify=0" target="contentFrame">View</a></li>
			  </ul>    
      </li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
    <ul>
      <li><a href="#">General Inquiries</a></li>
      <li><a href="#">Ask me a Question</a></li>
    </ul>
  </li>
</ul>

 -->

	<div id='menuWrapper'>
		<ul class='menu'>
			<li class='top'><a class='top_link' href=''><span>Home</span></a></li>

			<li class='top'><a class='top_link' href=''><span
					class='down'>Employee</span></a>
				<ul class='sub'>
						<li><a href='EmployeeAdd.jsp' target="contentFrame">Add</a></li>
						<li><a class='fly' href='' >View</a>
							<ul>
								<li><a href='EmployeeView.jsp' target="contentFrame">All</a></li>
								<li><a href='' target="contentFrame">By Id</a></li>
							</ul>
						</li>
						<li><a href='' target="contentFrame">Modify</a></li>
				</ul>
			</li>
			<li class='top'><a class='top_link' href=''><span
					class='down'>Project</span></a>
				<ul class='sub'>
						<li><a href='ProjectAdd.jsp' target="contentFrame">Add</a></li>
						<li><a class='fly' href='' >View</a>
							<ul>
								<li><a href='ProjectViewAll.jsp?isModify=0' target="contentFrame">All</a></li>
								<li><a href='' target="contentFrame">By Id</a></li>
							</ul>
						</li>
						<li><a href='ProjectViewAll.jsp?isModify=1' target="contentFrame">Modify</a></li>
						<li><a class='fly' href='' >Teams</a>
							<ul>
								<li><a href='ProjectTeamAdd.jsp' target="contentFrame">Create</a></li>
							</ul>
						</li>
				</ul>
			</li>
			<li class='top'><a class='top_link' href=''><span
					class='down'>Title 3</span></a>
				<ul class='sub'>
					<li><a href=''>Submenu 3.1</a></li>
					<li><a href=''>Submenu 3.2</a></li>
					<li><a href=''>Submenu 3.3</a></li>
					<li><a href=''>Submenu 3.4</a></li>
				</ul></li>

			<li class='top'><a class='top_link' href=''><span
					class='down'>Title 4</span></a>
				<ul class='sub'>
					<li><a href=''>Submenu 4.1</a></li>
					<li><a class='fly' href=''>Submenu 4.2</a>
						<ul>
							<li><a href=''>Submenu 4.2.1</a></li>
							<li><a href=''>Submenu 4.2.2</a></li>
							<li><a href=''>Submenu 4.2.3</a></li>
							<li><a href=''>Submenu 4.2.4</a></li>
							<li><a href=''>Submenu 4.2.5</a></li>
							<li><a href=''>Submenu 4.2.6</a></li>
						</ul></li>
					<li><a href=''>Submenu 4.3</a></li>
					<li><a href=''>Submenu 4.4</a></li>
					<li><a href=''>Submenu 4.5</a></li>
					<li><a href=''>Submenu 4.6</a></li>
				</ul></li>

			<li class='top'><a class='top_link' href=''><span
					class='down'>Title 5</span></a>
				<ul class='sub'>
					<li><a href=''>Submenu 5.1</a></li>
					<li><a href=''>Submenu 5.2</a></li>
					<li><a href=''>Submenu 5.3</a></li>
				</ul></li>



		</ul>
	</div>


	<iframe name="contentFrame" id="contentFrame"
		style="width: 100%; height: 600px; color: rgb(200, 200, 240);"></iframe>

</body>
</html>